<template>
  <div class="table-wrapper">
    <el-table
      :ref="refName"
      v-loading="loading"
      :data="value"
      :max-height="maxHeight"
      :stripe="stripe"
      :size="size"
      :border="border"
      :row-key="rowKey"
      empty-text="No hay datos por el momento"
      :header-cell-class-name="
        row => {
          if (selectionType === 'radio' && row.columnIndex === 0) {
            return 'hide-select-all'
          }
        }
      "
      :span-method="spanMethod"
      @select="hanldeSelectChange"
      @select-all="hanldeSelectChange"
    >
      <el-table-column v-if="showSelection" type="selection" :reserve-selection="reserveSelection" label="" align="center" width="50"></el-table-column>
      <el-table-column :fixed="config[0].fixed || false" v-if="showIndex && config.length" type="index" label="Número" align="center" width="74"></el-table-column>
      <el-table-column
        v-for="(t, index) in config"
        :key="index"
        :type="t.type || '—'"
        :width="t.width || 'auto'"
        :prop="t.prop"
        :label="t.type == 'index' ? 'Número' : t.label"
        :align="t.align || 'center'"
        :fixed="t.fixed || false"
      >
        <template slot-scope="scope">
          <template v-if="t.slot">
            <slot :name="t.slot" :row="scope.row" :index="scope.$index"></slot>
          </template>
          <div v-else>{{ t.type === 'index' ? scope.$index + 1 : scope.row[t.prop] }}</div>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-box" v-if="!hidePage">
      <el-pagination
        :background="background"
        :layout="layout"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :current-page="pageConfig.page"
        :page-sizes="pageSizes"
        :page-size="pageConfig.pageSize"
        :total="pageConfig.pageTotal"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MTable',
  props: {
    refName: {
      type: String,
      default: 'defaultTable',
    },
    loading: {
      type: Boolean,
      default: false,
    },
    config: {
      type: [Array, Object],
      default: () => [],
    },
    value: {
      type: Array,
      default: () => [],
    },
    maxHeight: {
      type: [String, Number],
      default: '—',
    },
    stripe: {
      type: Boolean,
      default: true,
    },
    size: {
      type: String,
      default: '-',
    },
    border: {
      type: Boolean,
      default: true,
    },
    showSelection: {
      type: Boolean,
      default: false,
    },
    selectionType: {
      type: String,
      default: 'checkbox',
    },
    rowKey: {
      type: String,
      default: 'id',
    },
    reserveSelection: {
      type: Boolean,
      default: false,
    },
    showIndex: {
      type: Boolean,
      default: true,
    },
    spanMethod: {
      type: Function,
    },
    hidePage: {
      type: Boolean,
      default: false,
    },
    pageConfig: {
      type: Object,
      default: () => {
        return {
          page: 1,
          pageSize: 10,
          pageTotal: 0,
        }
      },
    },
    background: {
      type: Boolean,
      default: true,
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper',
    },
    pageSizes: {
      type: Array,
      default: () => {
        return [5, 10, 20, 50]
      },
    },
  },
  data() {
    return {
      selectedItem: null,
    }
  },
  watch: {
    config: {
      immediate: true,
      handler: function(val) {
        if (Object.prototype.toString.call(val) == '[object Object]') {
          const temp = []
          for (const key in val) {
            temp.push({
              label: val[key],
              prop: key,
            })
          }
          this.$emit('update:config', temp)
        }
      },
    },
  },
  methods: {
    hanldeSelectChange(selection, row) {
      let result = null
      if (this.selectionType === 'radio') {
        const len = selection.length
        if (this.selectionType === 'radio') {
          this.$refs[this.refName].clearSelection()
          if (len) this.$refs[this.refName].toggleRowSelection(row)
        }
        result = len ? row : ''
      } else {
        result = selection
      }
      this.$emit('select-change', result)
    },
    handleSizeChange(pageSize) {
      this.$emit('update:pageConfig', { ...this.pageConfig, pageSize })
      this.$emit('page-change')
    },
    handlePageChange(page) {
      this.$emit('update:pageConfig', { ...this.pageConfig, page })
      this.$emit('page-change')
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-radio__label {
    padding-left: 0;
  }
  .hide-select-all {
    .cell {
      .el-checkbox__inner {
        display: none;
        position: relative;
      }
      &::before {
        content: '选择';
        position: absolute;
        top: 2px;
        left: 0;
        width: 50px;
        text-align: center;
      }
    }
  }
  .el-table .el-table__cell {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .el-table .cell {
    padding-left: 6px;
    padding-right: 6px;
  }
}
.table-wrapper {
  .page-box {
    text-align: center;
    margin: 20px 0 70px;
  }
}
</style>
